<template>
  <div class="detail ace">
    <Header_h class="Header_h" v-if="pc == 1"></Header_h>
    <Header class="Header" v-else />
    <NavItem class="NavItem" :class="type != 1 ? '' : ''" />

    <!--    <div class="Breadcrumbs" v-if="type != 1 && !pc">-->
    <div class="Breadcrumbs">
      <!-- <Breadcrumb /> -->
      <el-button size="mini" class="pubBtn3" style="margin-right: 20px" type="button" @click="$router.push(`${url}`)">
        <router-link :to="{ path: `${url}` }">返回</router-link>
      </el-button>
      <el-breadcrumb separator="-">
        <el-breadcrumb-item v-if="path == '/patentDetails'" :to="{ path: `/patent` }">我的专利管理</el-breadcrumb-item>
        <el-breadcrumb-item v-if="path == '/compdetail'" :to="{ path: `/competitor` }">监控竞争对手</el-breadcrumb-item>
        <el-breadcrumb-item v-if="path == '/cutDetails'" :to="{ path: `/cutting` }">产学情报研</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `${url}` }">专利列表</el-breadcrumb-item>
        <!-- <el-breadcrumb-item :to='{path:`${url}`}'>{{name}}</el-breadcrumb-item> -->
        <el-breadcrumb-item>专利详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-main :class="pc == 1 ? 'main-top' : 'main-top asdsa'">
      <el-row type="flex" justify="space-between" class="title_pns">
        <el-col :xl="24" class="tio" v-if="desc">
          <span class="v_span">{{ desc.pns }}</span>
          <span class="v_span2">{{ desc.tio }}</span>
        </el-col>
        <el-col :push="2" class="icon-tog mb" :xs="10">
          <i @click="show = true" class="iconfont icon-toggle"></i>
        </el-col>
        <el-col class="d_btn pc" style="text-align: right">
          <el-button @click="copy" :data-clipboard-text="record" id="express_info_right" icon="iconfont icon-fenxiang">
            分享该专利
          </el-button>
          <el-button icon="iconfont icon-lanmuyeicon_pdfxiazai" @click="dow()">下载专利文件</el-button>
        </el-col>
      </el-row>
      <el-row class="infos" :gutter="10">
        <el-col :xl="11" :md="15">
          <div class="detail_info">
            <div class="detail_info_first_box">
              <el-descriptions :column="1" border style="width: 405px;">
                <el-descriptions-item label="法律状态/事件">
                  <div class="detail_info_last">
                    <el-tag style="border: none" size="small" effect="dark" color="#4ba22f" v-if="desc.status == '授权'">
                      {{
                        desc.status
                    }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#4ba22f"
                      v-if="desc.status == '部分无效'">
                      {{ desc.status }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#4ba22f"
                      v-if="desc.status == '权利恢复'">
                      {{ desc.status }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#6c778b"
                      v-if="desc.status == '未缴年费'">
                      {{ desc.status }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#6c778b" v-if="desc.status == '撤回'">
                      {{
                        desc.status
                    }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#6c778b" v-if="desc.status == '驳回'">
                      {{
                        desc.status
                    }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#6c778b"
                      v-if="desc.status == '期限届满'">
                      {{ desc.status }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#6c778b"
                      v-if="desc.status == '避重授权'">
                      {{ desc.status }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#6c778b"
                      v-if="desc.status == '全部撤销'">
                      {{ desc.status }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#da7b21"
                      v-if="desc.status == '实质审查'">
                      {{ desc.status }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#da7b21" v-if="desc.status == '公开'">
                      {{
                        desc.status
                    }}
                    </el-tag>
                    <div v-if="desc.status == '暂无数据' || desc.status == ''">暂无数据</div>
                    <el-tag style="
                        height: 25px;
                        line-height: 25px;
                        margin-right: 5px;
                        margin-bottom: 5px;
                      " size="small" v-for="(  t, s) in desc.event  " :key="s" v-if="desc.event.length > 0"
                      effect="plain" type>{{ t }}
                    </el-tag>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="申请号">{{ desc.ano }}</el-descriptions-item>
                <el-descriptions-item label="申请日">{{ desc.ad }}</el-descriptions-item>
                <el-descriptions-item label="公开（公告）号">
                  <div>{{ desc.pns }}</div>
                  <!-- <div style="color: #3377ff;" @click="getintro('PIDCNA0202206070000000011459416681U09Q4011451')">{{ desc.pns }}</div> -->
                </el-descriptions-item>
                <el-descriptions-item label="公开（公告）日">{{ desc.pd }}</el-descriptions-item>
                <el-descriptions-item label="授权日">{{ desc.sq }}</el-descriptions-item>
                <el-descriptions-item label="预估到期日">{{ desc.rd }}</el-descriptions-item>
              </el-descriptions>


              <!-- <div class="detail_head_title">
                <div class="detail_info_title">法律状态/事件</div>
                <div class="detail_info_title">申请号</div>
                <div class="detail_info_title">申请日</div>
                <div class="detail_info_title">公开（公告）号</div>
                <div class="detail_info_title">公开（公告）日</div>
                <div class="detail_info_title">授权日</div>
                <div class="detail_info_title">预估到期日</div>
              </div> -->
              <!-- <div>
                <div class="detail_info_last">
                  <el-tag style="border: none" size="small" effect="dark" color="#4ba22f" v-if="desc.status == '授权'">{{
                      desc.status
                  }}
                  </el-tag>
                  <el-tag style="border: none" size="small" effect="dark" color="#4ba22f" v-if="desc.status == '部分无效'">
                    {{ desc.status }}
                  </el-tag>
                  <el-tag style="border: none" size="small" effect="dark" color="#4ba22f" v-if="desc.status == '权利恢复'">
                    {{ desc.status }}
                  </el-tag>
                  <el-tag style="border: none" size="small" effect="dark" color="#6c778b" v-if="desc.status == '未缴年费'">
                    {{ desc.status }}
                  </el-tag>
                  <el-tag style="border: none" size="small" effect="dark" color="#6c778b" v-if="desc.status == '撤回'">{{
                      desc.status
                  }}
                  </el-tag>
                  <el-tag style="border: none" size="small" effect="dark" color="#6c778b" v-if="desc.status == '驳回'">{{
                      desc.status
                  }}
                  </el-tag>
                  <el-tag style="border: none" size="small" effect="dark" color="#6c778b" v-if="desc.status == '期限届满'">
                    {{ desc.status }}
                  </el-tag>
                  <el-tag style="border: none" size="small" effect="dark" color="#6c778b" v-if="desc.status == '避重授权'">
                    {{ desc.status }}
                  </el-tag>
                  <el-tag style="border: none" size="small" effect="dark" color="#6c778b" v-if="desc.status == '全部撤销'">
                    {{ desc.status }}
                  </el-tag>
                  <el-tag style="border: none" size="small" effect="dark" color="#da7b21" v-if="desc.status == '实质审查'">
                    {{ desc.status }}
                  </el-tag>
                  <el-tag style="border: none" size="small" effect="dark" color="#da7b21" v-if="desc.status == '公开'">{{
                      desc.status
                  }}
                  </el-tag>
                  <div v-if="desc.status == '暂无数据' || desc.status == ''">暂无数据</div>
                  <el-tag size="small" v-if="desc.event" effect="plain" type="">{{desc.event}}wu</el-tag>
                  <el-tag style="
                      height: 25px;
                      line-height: 25px;
                      margin-right: 5px;
                      margin-bottom: 5px;
                    " size="small" v-for="(  t, s) in desc.event  " :key="s" v-if="desc.event.length > 0"
                    effect="plain" type>{{ t }}
                  </el-tag>
                </div>
                <div class="detail_info_last">{{ desc.ano }}</div>
                <div class="detail_info_last">{{ desc.ad }}</div>
                <div class="detail_info_last">{{ desc.pns }}</div>
                <div class="detail_info_last">{{ desc.pd }}</div>
                <div class="detail_info_last">{{ desc.sq }}</div>
                <div class="detail_info_last">{{ desc.rd }}</div> -->
              <!-- </div> -->
            </div>
            <div class="img-box">
              <div class="demo-image__preview">
                <el-image class="img" fit="contain" :src="desc.imgo"></el-image>
              </div>

              <br />
              <!-- <span class="tips">附图({{desc.imgo}})</span> -->
            </div>
          </div>
        </el-col>
        <el-col :md="6">
          <p class="context mb_zy" style="margin-bottom: 20px; font-weight: 700">{{ desc.is_loc == "0" ? "摘要" : "摘要说明"
          }}</p>
          <p v-html="desc.desc" style="line-height: 1.8" class="context"></p>
        </el-col>
      </el-row>
      <el-row class="mb_top top_line" :gutter="10">
        <el-col :xl="10" :md="13">
          <div class="abst__layout-row">
            <div class="abst__layout-label context mb_context">当前申请(专利权)人</div>
            <div class="abst__layout-text context" v-html="desc.aspc"></div>
          </div>
          <div class="abst__layout-row">
            <div class="abst__layout-label context mb_context">原始申请(专利权)人</div>
            <div class="abst__layout-text context" v-html="desc.aspo"></div>
          </div>
          <!--  <div class="abst__layout-row">
                <div class="abst__layout-label context">Docdb申请(专利权)人</div>
                <div class="abst__layout-text context" >{{desc.docdb}}</div>
          </div>-->
          <div class="abst__layout-row" v-if="desc.is_loc == '0'">
            <div class="abst__layout-label context mb_context">IPC分类号</div>
            <div class="abst__layout-text context">{{ desc.ipc }}</div>
          </div>
          <div class="abst__layout-row" v-if="desc.is_loc == '1'">
            <div class="abst__layout-label context mb_context">LOC分类号</div>
            <div class="abst__layout-text context">{{ desc.loc }}</div>
          </div>
          <!--  <div class="abst__layout-row">
                <div class="abst__layout-label context">国民经济行业分类号</div>
                <div class="abst__layout-text context" >{{desc.gm?desc.gm:"暂无数据"}}</div>
          </div>-->
          <div class="abst__layout-row">
            <div class="abst__layout-label context mb_context">发明人</div>
            <div class="abst__layout-text context">{{ desc.ino }}</div>
          </div>
          <div class="abst__layout-row">
            <div class="abst__layout-label context mb_context">代理机构</div>
            <div class="abst__layout-text context">{{ desc.agc }}</div>
          </div>
          <div class="abst__layout-row">
            <div class="abst__layout-label context mb_context">代理人</div>
            <div class="abst__layout-text context">{{ desc.ag }}</div>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <!-- <Service class="service" v-if='this.$route.meta.serve && type!=1'/> -->
    <div v-show="show" class="transition-box mb">
      <transition name="el-fade-in">
        <div v-show="show" class="el-zoom-in-top">
          <p @click="show = false" class="close">
            <i class="iconfont icon-guanbi"></i>
          </p>
          <ul class="mb_nav_li">
            <li @click="show = false">
              <router-link to="/detail">摘要</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/power">权力要求</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/instructions">说明书</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/drawings">附图</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/fullText">全文</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/kindred">同族信息</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/law">法律信息</router-link>
            </li>
          </ul>
          <el-row class="mt_btn" style="margin: 0 10px">
            <el-button @click="copy" id="express_info_right" :data-clipboard-text="record" type="warning">分享该专利
            </el-button>
            <el-button icon="iconfont icon-lanmuyeicon_pdfxiazai" @click="dow()" type="primary">下载专利文件
            </el-button>
          </el-row>
        </div>
      </transition>
    </div>
    <!-- v-if="type == 1"  -->
    <rightMenu @moveTo="moveTo" />
    <QRCode v-if="QRCodeVisible" :text="record" :desc="desc" :dialogVisible="QRCodeVisible" @val="val" />
  </div>
</template>

<script>
  import {
    detail,
    download
  } from "@/api";
  import Breadcrumb from "@/components/Breadcrumb";
  import NavItem from "@/components/Navitem";
  import QRCode from "@/components/QRCode";
  import rightMenu from "@/components/web/rightMenu";
  import {
    VUE_APP_BASE_API,
    PAGE_BASE_URL
  } from "@/config";
  import {
    setShare
  } from "@/wechat";
  import Service from "@/components/Service";
  import "element-ui/lib/theme-chalk/base.css";
  import Header_h from "@/components/Header_h";
  import Header from "@/components/Header";
  import Navbar from "@/layout/components/Navbar.vue"
  import Footer from "@/components/Footer";
  import {
    getToken
  } from '@/utils/auth'

  export default {
    components: {
      Breadcrumb,
      NavItem,
      Service,
      rightMenu,
      QRCode,
      Header_h,
      Header,
      Footer,
      Navbar,

    },
    data() {
      return {
        QRCodeVisible: false,
        dialogVisible: true,
        activeName: "first",
        desc: [],
        url: "",
        name: "",
        path: "",
        show: false,
        pid: '',
        // record: `${PAGE_BASE_URL}#/detail?pid=${this.pid}&type=1&pc=${this.$route.query.pc ? this.$route.query.pc : 1}`,
        record: '',
        roeve: "",
        type: sessionStorage.getItem("type"),
        token: getToken(),
        share: this.$route.query.type,
        pc: this.$route.query.pc ? this.$route.query.pc : sessionStorage.getItem("pc") || 0,

      };
    },
    created() {
      if (this.$route.query.pid) {
        sessionStorage.setItem('pid', this.$route.query.pid)
      }
      this.pid = this.$route.query.pid
      // console.log(this.$store.getters.token, 'token')
      let pc
      if (this.$store.getters.token) {
        pc = 0
      } else {
        pc = 1
      }
      // console.log(pc,2)
      this.record = PAGE_BASE_URL + '#/detail?pid=' + (this.pid ? this.pid : sessionStorage.getItem('pid')) +
        '&type=1&pc=' + pc
      // console.log(this.record, 'asddas', this.$route)

      this.roeve = this.$route.path;
      if (this.$route.query.pid) {
        sessionStorage.setItem("pid", this.$route.query.pid);
      }

      if (this.$route.query.pc) {
        sessionStorage.setItem("pc", this.$route.query.pc)
      } else {
        sessionStorage.setItem("pc", 0)
      }
    },
    beforeDestroy() {
      document.title = "优专知识产权行政管理"
    },
    computed: {},
    async mounted() {
      // console.log(sessionStorage.getItem("type"));
      try {
        if (this.$route.query.type) {
          this.type = this.$route.query.type;
          sessionStorage.setItem("type", this.$route.query.type);
        } else {}
        // if (sessionStorage.getItem("url")) {
        //   this.url = sessionStorage.getItem("url");
        // } else {
        //   this.url = 'web/enterprise'
        // }
        this.url = sessionStorage.getItem("url");

        this.path = sessionStorage.getItem("path");
        this.name = sessionStorage.getItem("name");
        const pid = sessionStorage.getItem("pid");
        this.desc = await detail({
          pid: pid,
          type: 1
        });
        const desc = `优专知识产权行政管理`;
        const title = `[顺企中心]${this.desc.tio}-${this.desc.ano}`;
        document.title = title
        setTimeout(() => {
          setShare({
            title, // 分享标题
            desc,
          });
        }, 1000);
      } catch (e) {
        this.$message(e.message);
      }
    },
    methods: {
      moveTo() {
        window.scrollTo(0, 0);
      },
      val(val) {
        this.QRCodeVisible = val;
      },
      contactus(val) {
        this.dialogVisible = val;
      },
      closeVisible(val) {
        this.dialogVisible = val;
      },
      async dow() {
        try {
          const pid = sessionStorage.getItem("pid");
          // const res = await download(pid)
          window.open(`${VUE_APP_BASE_API}/v1/index/download2?pid=${pid}`);
        } catch (e) {
          this.$message(e.message);
        }
      },
      copy() {
        this.show = false
        let clipboard = new this.clipboard("#express_info_right");
        let that = this;
        clipboard.on("success", function() {
          //
          that.QRCodeVisible = true;
          clipboard.destroy();
        });
        clipboard.on("error", function() {
          that.$message.error("复制失败");
        });
      },
      async getintro(pid) {
        // console.log(pid)
        sessionStorage.setItem('pid',pid)
        this.desc = await detail({
          pid: pid,
          type: 1
        });
      }
    },
  };
</script>


<style lang="less" scoped>
  ::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
    border: none;
    background: none;
    padding: 0 0 12px 0;
  }

  ::v-deep tbody tr th {
    width: 205px;
    font-size: 14px;
    color: rgba(31, 46, 76, 1) !important;
    margin: 20px 0;
    vertical-align: middle;
  }

  // .Header_h /deep/.nav {
  //   height: 65px;
  // }
  .detail_large {
    margin-bottom: 44px;
  }

  .navitems {
    top: 10% !important;
  }

  .CN {
    font-size: 18px;
    font-weight: 400;
    color: rgba(42, 139, 45, 1);
    display: inline-block;
  }

  .title {
    font-size: 18px;
    font-weight: 400;
    color: rgba(31, 46, 76, 1);
    display: inline-block;
    margin-left: 20px;
  }

  .detail_info {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
    // border-bottom:4px solid #eee;
  }

  .detail_info_title {
    font-size: 14px;
    font-weight: 400;
    color: rgba(31, 46, 76, 1);
    margin: 20px 0;
  }

  .detail_info_last {
    font-size: 14px;
    font-weight: 400;
    color: rgba(31, 46, 76, 1);
    // margin: 20px 64px;
  }

  .img-box {
    width: 188px;
    // height:237px;
    border: 1px solid rgba(230, 233, 240, 1);
    border-radius: 5px;
    text-align: center;

    .img {
      width: 133px;
      height: 193px;
      object-fit: cover;
      margin: 10px 0;
    }
  }

  .detail_info_first_box {
    display: flex;
    align-items: center;
    // margin-bottom: 60px;
  }

  .tips {
    font-size: 14px;
    font-weight: 400;
    color: rgba(31, 46, 76, 1);
    display: block;
    margin: 10px 0;
  }

  .detail_head_title {
    width: 143px;
  }

  .detail_info_patent {
    // height:50px;
    // margin:0 0 22px 0;
    margin-bottom: 20px;
    margin-left: 64px;
    // width: 480px;
  }

  .detail_head_context {
    width: 143px;
    margin-bottom: 20px;
  }

  .v_span {
    font-size: 18px;
    font-weight: 400;
    color: rgba(42, 139, 45, 1);
  }

  .v_span2 {
    font-size: 18px;
    font-weight: 400;
    color: rgba(31, 46, 76, 1);
    padding-left: 20px;
  }

  .infos {
    margin-top: 37px;
  }

  .abst__layout-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;

    .abst__layout-label {
      width: 190px;
      margin-right: 20px;
      text-align: left;
      padding-bottom: 15px;
    }

    .abst__layout-text {
      width: 100%;
      text-align: left;
    }
  }

  .tio {
    line-height: 2.2;
  }

  .title_pns {
    border-bottom: 1px solid #c8d0dc;
    padding-bottom: 20px;
  }

  .pc {
    display: block;
  }

  .mb {
    display: none;
  }

  .asdsa {
    // margin-top: 0 !important;
  }

  .main-top {
    margin-top: 0;
  }

  @media (max-width: 750px) {
    .main-top {
      padding-top: 60px;
      margin-top: 0;
    }

    .navbar {
      display: none;
    }

    .abst__layout-label {
      border-bottom: 1px solid #dbdbdb;
    }

    .detail_info {
      border-bottom: 4px solid #dbdbdb;
    }

    .v_span2 {
      display: block;
    }

    .mb_zy {
      margin-bottom: 10px !important;
    }

    .Breadcrumbs,
    .NavItem,
    .Header,
    .service {
      display: none;
    }

    .main-top {
      width: 100%;
      margin-left: 0 !important;
      padding-bottom: 0;
      // padding-top: 60px;
      top: 0;
    }

    .pc {
      display: none;
    }

    .mb {
      display: block;
    }

    .detail_info_title {
      margin: 15px 0;
    }

    ::v-deep tbody tr th {
      margin: 15px 0;
    }

    .detail_info_last {
      margin: 15px 0;
    }

    .infos {
      margin: 10px 0 0 0;
    }

    .detail_info {
      margin-bottom: 30px;
      flex-wrap: wrap;
      flex-direction: column-reverse;
      width: 100%;
    }

    .detail_info_first_box {
      flex-wrap: wrap;
      width: 100%;
      justify-content: space-between;
    }

    .detail_head_title {
      width: auto;
    }

    .img-box {
      width: 100%;
    }

    .abst__layout-row {
      flex-direction: column;
    }

    .mb_top {
      margin-top: 20px;
    }

    .top_line {
      border-top: 4px solid #eee;
      padding-top: 20px;
    }

    .mb_context {
      font-weight: bold;
      margin-bottom: 10px;
      width: 100% !important;
    }

    .v_span2 {
      padding-left: 0;
    }

    .tio {
      line-height: 1.3;
    }

    .icon-tog {
      text-align: center;
      display: inline-block;
      line-height: 46px;
    }

    .icon-toggle {
      font-size: 25px !important;
    }

    .title_pns {
      border-bottom: 1px solid #c8d0dc;
      padding-bottom: 10px;
    }

    .transition-box {
      position: fixed;
      right: 0;
      width: 100%;
      height: 100%;
      top: 0;
      z-index: 9;
      background-color: rgba(0, 0, 0, 0.3);
    }

    .el-zoom-in-top {
      position: fixed;
      width: 80%;
      height: 100%;
      margin: 0 auto;
      background-color: #fff;
      top: 0;
      right: 0;
      z-index: 10;
    }

    .mb_nav_li {
      margin: 60px auto 0;
    }

    .mb_nav_li li {
      // margin-top:20px;
      padding: 20px 15px;
      border-bottom: 1px solid #ddd;
    }

    .close {
      float: right;
      // padding: 10px;
      margin-top: 25px;
      margin-right: 25px;

      .iconfont {
        font-size: 22px;
      }
    }

    .mt_btn {
      margin-top: 30px !important;
    }

    .asdsa {
      padding-top: 20px;
    }
  }
</style>
